<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="../baselayout/import.jsp"%>
<%@ taglib uri="http://www.bjtu.edu.cn/taglibs" prefix="wt" %>  

<wt:render dataToRender="result" />

<style>
.bar rect {
	fill: steelblue;
}

.bar text {
	fill: #fff;
	font: 10px sans-serif;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
	var formatCount = d3.format(",.0f");
	var svg = d3.select("svg"), margin = {
		top : 10,
		right : 30,
		bottom : 30,
		left : 10
	}, 
	width = +svg.attr("width") - margin.left - margin.right, 
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");

	d3.json("label.json", function(error, data) {
	    var barWidth = width/data.length;
		var x = d3.scaleLinear().rangeRound([0, width]);
		var bin_num = data.length;
		var bins = d3.histogram()
		           .domain([ 0, data.length ])
				   .thresholds(x.ticks(data.length))(data);

		var bar = g.selectAll(".bar").data(data).enter().append("g").attr(
				"class", "bar").attr("transform", function(d,i) {
			var tran = "translate(" + barWidth * i+ "," + (height-x(d.val)) + ")";
			return tran;
		});

		bar.append("rect").data(data).attr("x", 0).attr("width",
				width / data.length)
				.attr("height", function(d) {
					return x(d.val)
		});

		//确信度
		bar.append("text").data(data).attr("dy", ".75em").attr("y", 6).attr(
				"x", (x(bins[0].x1) - x(bins[0].x0)) / 2.5).attr("text-anchor",
				"middle").text(function(d) {return formatCount(d.val*100)+"%";});
		//类标		
		bar.append("text").data(data).attr("dy",function(d){return 10+x(d.val)})
		        .attr("y", 6).attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2.5).attr(
				"style", "fill:steelblue")
				.attr("text-anchor","middle").text(function(d) {return d.label});
        });
</script>

